<template>
    <div>vue3测试兼容vue2语法</div>
    <ul class="box">
        <li v-for="item in 10" :key="item">{{ item }}</li>
    </ul>
    <button @click="handler">点击我切换</button>
    <transition>
        <Child v-if="active" />
    </transition>
    <input type="text" v-model="password">
    <teleport to='.box'>
        <div>
            我爱你祖国{{ total }}
        </div>
    </teleport>
</template>
<script lang="ts">
//vue2:选择式API写法
//vue3:组合式API写法[函数]
import Child from './components/Child.vue';
export default {
    name: 'App',
    data() {
        return {
            active: true,
            password: '123'
        }
    },
    methods: {
        handler() {
            this.active = !this.active;
        }
    },
    watch: {
        active: {
            handler() {
                console.log(123);
            },
            deep: true,
            immediate: true
        }
    },
    computed: {
        total() {
            return this.password + 66;
        }
    },
    beforeCreate() {
        console.log('1')
    },
    created() {
        console.log('2')
    },
    beforeMount() {
        console.log('3')
    },
    mounted() {
        console.log('4')
    },
    beforeUpdate() {
        console.log(5);
    },
    updated() {
        console.log(6);
    }
    ,
    components: {
        Child
    }
}
</script>
<style>
.box {
    background: red;
}

.v-enter-from {
    opacity: 0;
}

.v-enter-active {
    transition: all 1s;
}

.v-enter-to {
    opacity: 1;
}
</style>